import { ProTableColumn } from '@/components/pro-table/type'
import { NButton, NPopconfirm, NSpace, NSwitch } from 'naive-ui'
import { Ref } from 'vue'

type props = {
  handleEditRole: (row: any) => void
  fetchDelRole: (id: number) => void
  changeRoleStatus: (row: any) => void
  handleGrantRolePerm: (row: any) => void
  roleStatusLoading: Ref<boolean>
}

export const useRoleProTable = ({
  handleEditRole,
  fetchDelRole,
  changeRoleStatus,
  handleGrantRolePerm,
  roleStatusLoading
}: props) => {
  const currentEditRoleId = ref<any>(0)
  const columns: ProTableColumn[] = [
    {
      title: '角色名',
      key: 'roleName',
      query: {
        type: 'input'
      }
    },
    {
      title: '角色编码',
      key: 'roleCode',
      query: {
        type: 'input'
      }
    },
    {
      title: '排序',
      key: 'sortOrder'
    },
    {
      title: '状态',
      key: 'validFlag',
      visiable: useHasPermi('role:edit'),
      render(row) {
        return (
          <NSwitch
            rubberBand={false}
            value={!!row.validFlag}
            loading={
              currentEditRoleId.value == row.id && roleStatusLoading.value
            }
            onUpdateValue={() => {
              currentEditRoleId.value = row.id
              changeRoleStatus(row)
            }}
          >
            {{
              checked: () => '已启用',
              unchecked: () => '已禁用'
            }}
          </NSwitch>
        )
      }
    },
    {
      title: '备注',
      key: 'remark'
    },
    {
      title: '操作',
      key: 'actions',
      width: 190,
      render(row) {
        return (
          <>
            <NButton
              size="small"
              type="primary"
              quaternary
              onClick={() => handleEditRole(row)}
            >
              修改
            </NButton>

            <NButton
              size="small"
              type="primary"
              quaternary
              onClick={() => handleGrantRolePerm(row)}
            >
              授权
            </NButton>
            <NPopconfirm onPositiveClick={() => fetchDelRole(row.id as number)}>
              {{
                trigger: () => (
                  <NButton size="small" type="error" quaternary>
                    删除
                  </NButton>
                ),
                default: () => '您确定要删除？'
              }}
            </NPopconfirm>
          </>
        )
      }
    }
  ]

  return {
    columns
  }
}
